<template>
	<div>
		<div class="shopcart">
			<div class="content">
				<div class="content-left" @click="toggleIsShowState">
					<div class="logo-wrapper">
						<div class="logo" :class="{highlight:totalFoodCount}">
							<i class="iconfont icon-shopping_cart" :class="{highlight:totalFoodCount}"></i>
						</div>
						<div class="num">{{totalFoodCount}}</div>
					</div>
					<div class="price">￥{{totalPrice}}</div>
					<div class="desc">另需配送费￥{{businessInfo.deliveryPrice}} 元</div>
				</div>
				<div class="content-right" v-if="cartFood && businessInfo">
					<div class="pay" :class="payClass">
						<!-- 这里有三种形式的变化用一个计算属性计算 -->
						 {{payText}}
					</div>
				</div>
			</div>
			<transition name="move">
			<div class="shopcart-list" v-if="foodTabIsShow">
				<div class="list-header">
					<h1 class="showtitle">购物车</h1>
					<span class="empty" @click="clearCart">清空</span>
				</div>
				<div class="list-content">
					<ul>
						<li class="food" v-for="(food,index) in cartFood" :key="index">
							<span class="name">{{food.name}}</span>
							<div class="price1">
								<span>￥{{food.price}}</span>
								</div>
							<div class="cartcontrol-wrapper">
								<ShopControl :foodObj="food"/>
							</div>
						</li>
					</ul>
				</div>
			</div>
			</transition>
		</div>
		<div class="list-mask" v-show="foodTabIsShow" @click="toggleIsShowState"></div>
	</div>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	import { Toast,MessageBox  } from 'mint-ui';
	import BScroll from '@better-scroll/core'
	import ShopControl from '../cartControl/index.vue'
	export default{
		name:'ShopCart',
		components:{
			ShopControl
		},
		computed:{
			...mapState(['cartFood','businessInfo']),
			...mapGetters(['totalPrice','totalFoodCount']),
			payClass(){ // 计算支付文本所在类名的变化,当总价格 > 商家的最小配送费时，高亮
				return this.totalPrice >= this.businessInfo.minPrice ? 'enough' : 'not-enough'
			},
			payText(){ // 计算支付文本的变化,
				if(this.totalPrice === 0){
					return `还差${this.businessInfo.minPrice}元起送`
				}else if(this.totalPrice < this.businessInfo.minPrice){
					return `还差${this.businessInfo.minPrice - this.totalPrice}元`
				}else{
					return '去结算'
				}
			}
		},
		data(){
			return{
				foodTabIsShow:false
			}
		},
		watch:{
			totalFoodCount(newVal){
				if(newVal == 0){
					this.foodTabIsShow = false
				}
			},
			// 侦听购物车tab标签,只要tab一显示就判断是否是第一次打开tab,从而好判断是否是第一次创建better-scroll实例
			foodTabIsShow(newVal){
				this.$nextTick(()=>{
					if(newVal){ // 证明值为真,隐藏的tab显示
						if(!this.scrollCart){// 没有better-scroll实例才进行创建,避免创建多个实例,第一次创建肯定是没有的,创建后保存起来即可
							this.scrollCart = new BScroll(document.querySelector('.list-content'),{
								click:true
							})
						}else{
							// 已经不是第一次进行创建better实例了
						}
					}
				})
			}
		},
		methods:{
			toggleIsShowState(){
				if(this.totalFoodCount > 0){
					this.foodTabIsShow = !this.foodTabIsShow
				}else{
					Toast('请先选点商品进购物车先吧~')
				}
			},
			clearCart(){
				MessageBox.confirm('确定执行此操作?').then(action => {
				    this.$store.commit('clearCart')
				},cancel=>{
					Toast('cancel~')
				});
			}
		}
	}
</script>

<style>
	.price1{
		    position: absolute;
		    color: red;
			right: 86px;
		    display: inline-block;
		    box-sizing: border-box;
		    line-height: 24px;
		    font-size: 14px;
		    font-weight: 700;
	}
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
	@import "../../common/stylus/mixins.styl"
	// .move-
	.shopcart
		position fixed
		left 0
		bottom 0
		z-index 50
		width 100%
		height 48px
	.content
		display flex
		background #141d27
		font-size 0
		color rgba(255, 255, 255, 0.4)
	.content-left
		flex 1
	.logo-wrapper
		display inline-block
		vertical-align top
		position relative
		top -10px
		margin 0 12px
		padding 6px
		width 56px
		height 56px
		box-sizing border-box
		border-radius 50%
		background #141d27
	.logo
		width 100%
		height 100%
		border-radius 50%
		text-align center
		background #2b343c
	&.highlight
		background $green
	.icon-shopping_cart
		line-height 44px
		font-size 24px
		color #80858a
	&.highlight
		color #fff
	.num
		position absolute
		top 0
		right 0
		width 24px
		height 16px
		line-height 16px
		text-align center
		border-radius 16px
		font-size 9px
		font-weight 700
		color #ffffff
		background rgb(240, 20, 20)
		box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.4)
	.price
		display inline-block
		vertical-align top
		margin-top 5px
		line-height 24px
		padding-right 12px
		box-sizing border-box
		font-size 16px
		font-weight 700
		// color #fff
	&.highlight
		color #fff
	.desc
		display inline-block
		vertical-align bottom
		margin-bottom 15px
		margin-left -45px
		font-size 10px
	.content-right
		flex 0 0 105px
		width 105px
	.pay
		height 48px
		line-height 48px
		text-align center
		font-size 12px
		font-weight 700
		color #fff
	&.not-enough
		background #2b333b
	&.enough
		background #00b43c
		color #fff
	.ball-container
	.ball
		position fixed
		left 32px
		bottom 22px
		z-index 200
		transition all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
	.inner
		width 16px
		height 16px
		border-radius 50%
		background $green
		transition all 0.4s linear
	.shopcart-list
		position absolute
		left 0
		top 0
		z-index -1
		width 100%
		transform translateY(-100%)
	&.move-enter-active, &.move-leave-active
		transition transform .3s
	&.move-enter, &.move-leave-to
		transform translateY(0)
	.list-header
		height 40px
		line-height 40px
		padding 0 18px
		background #f3f5f7
		border-bottom 1px solid rgba(7, 17, 27, 0.1)
	.title
		float left
		font-size 14px
		color rgb(7, 17, 27)
	.empty
		float right
		font-size 12px
		color rgb(0, 160, 220)
	.list-content
		padding 0 18px
		max-height 217px
		overflow hidden
		background #fff
	.food
		position relative
		padding 12px 0
		box-sizing border-box
	bottom-border-1px(rgba(7, 17, 27, 0.1))
	.name
		line-height 24px
		font-size 14px
		color rgb(7, 17, 27)
	.price
		// position absolute
		right 90px
		bottom 12px
		line-height 24px
		font-size 14px
		font-weight 700
		// color rgb(240, 20, 20)
	.cartcontrol-wrapper
		position absolute
		right 0
		bottom 6px
	.list-mask
		position fixed
		top 0
		left 0
		width 100%
		height 100%
		z-index 40
		// backdrop-filter blur(10px)
		opacity 1
		background rgba(7, 17, 27, 0.6)
	&.fade-enter-active, &.fade-leave-active
		transition all 0.5s
	&.fade-enter, &.fade-leave-to
		opacity 0
		background rgba(7, 17, 27, 0)
	.showtitle
			padding-left 14px
			color #93999f
			background #f3f5f7
			float left
			font-size 14px
</style>
